<template>
  <div class="frame">
    <h2>登录</h2>
    <el-input class="container" v-model="phone" placeholder="请输入手机号" />
    <el-input
        class="container"
        v-model="pwd"
        type="password"
        placeholder="请输入密码"
        show-password
    />
    <div>
      <el-button @click="login" class="container" type="primary" style="margin-bottom: 10px;width: 100px;">登录</el-button>
    </div>
    <br>
    <h></h>
  </div>
</template>

<script>
import {ref} from "vue";
import router from "@/router";
import {ElMessage} from "element-plus";
import API from "@/plugins/axiosInstanse";

export default {
  name: "Login",
  setup(){
    const phone = ref()
    const pwd = ref()
    const login=() => {
      if (phone.value === '') {
        ElMessage({
          message: '请输入账号',
          type: 'warning',
        })
        return
      }
      if (pwd.value === '') {
        ElMessage({
          message: '请输入密码',
          type: 'warning',
        })
        return
      }
      API.get('api/login', {
        params: {
          phone: phone.value,
          pwd: pwd.value
        }
      }).then(function (response) {
        if (response.Rsp.Status) {
          ElMessage({
            message: '登录成功',
            type: 'success',
          })
          sessionStorage.setItem('ID',response.User.ID)  // 将用户token保存到sessionStorage中(key:token)
          sessionStorage.setItem('Type',response.User.Type)  // 将用户token保存到sessionStorage中(key:token)
          router.go(-1)
        }
        else{
          ElMessage({
            message: '登录失败'+response.Rsp.Msg,
            type: 'error',
          })
        }
      })
    }
    return {
      phone,
      pwd,
      login
    }
  },
}
</script>

<style scoped>
.frame {
  width: 450px;
  margin: 180px auto;
  border: 2px solid #cacaca;
  padding: 20px;
  border-radius: 10px;
}
.container {
  margin-top: 20px;
}
</style>